<template>
	<view class="z-card p-24 orderCard">
		<view class="storeHead">
			<view class="headLeft">
				<img src="@/static/tabbar/tab4/store.png" class="img" alt="" />
				{{ detail.storeName }}
			</view>
			<text class="fs-32 fw-b text-231815">
				{{ orderTypeMap[detail.orderStatus] }}
			</text>
		</view>
		<!-- <view class="pt-10 pb-10 fs-24 text-7D7D7D">
			<text class="mr-24">{{detail.createTime}}</text>
		</view> -->

		<!-- <tm-scrollx :width="654" :height="120" :showBar="false"> -->
		<view class="oneCard">
			<image
				class="mr-24 w-120 h-120 rd-16 bg-7D7D7D"
				:src="detail.mainImg[0].url"
				mode=""
			></image>
			<view class="main">
				<view class="title">
					{{ detail.goodsName }}
				</view>
				<view class="">
					{{ detail.sku[0].key }}
					{{ detail.sku[0].value }}
					*
					{{ detail.productCount }}
				</view>
			</view>
			<view class="price">
				￥{{ Number(detail.goodsPrice) * detail.productCount }}
			</view>
		</view>
		<!-- </tm-scrollx> -->

		<view class="fd-r jc-fe ai-fe bottom">
			<view
				class="btn"
				@click="cancelFn(detail.orderNo)"
				v-if="detail.orderStatus == 'UN_PAID'"
			>
				取消订单
			</view>
			<view
				class="btn"
				@click="gotoDetail(detail.orderNo)"
				v-if="detail.orderStatus == 'UN_PAID'"
			>
				修改信息
			</view>
			<view class="red-btn" v-if="detail.orderStatus == 'UN_PAID'">
				继续支付
			</view>
			<view
				class="btn"
				@click="delOrder(detail.orderNo)"
				v-if="detail.orderStatus == 'CANCELLATION'"
			>
				删除订单
			</view>
			<view
				class="red-btn"
				@click="changPos(detail.orderNo)"
				v-if="
					detail.orderStatus == 'CANCELLATION' ||
					detail.orderStatus == 'TO_SHIP' ||
					detail.orderStatus == 'COMPLETED'
				"
			>
				再来一单
			</view>
			<view
				class="red-btn"
				@click="confirmOrder(detail.orderNo)"
				v-if="detail.orderStatus == 'TO_RECEIVED'"
			>
				确认收货
			</view>
		</view>
		<tm-drawer
			okText="添加"
			:hideHeader="true"
			okColor="#c8161d"
			class="drawer"
			ref="calendarView"
			placement="right"
			v-model:show="showWin"
		>
			<view class="storeMain" v-for="(v, i) in orderGoodsList" :key="i">
				<img :src="v.goodsPic[0].url" class="img" alt="" />
				<view class="main">
					<view class="title">
						{{ v.goodsName }}
					</view>
					<view class="">
						{{ v.goodsSkuAttr[0].key }}
						{{ v.goodsSkuAttr[0].value }}
						*
						{{ v.productCount }}
					</view>
				</view>
				<view class="price">
					￥{{ Number(v.goodsPrice) * v.productCount }}
				</view>
			</view>
			<view class="storeBottom">
				<view
					class="btn"
					@click="confirmCar(detail.orderNo, detail.storeId)"
				>
					加入购物车
				</view>
			</view>
			<!-- inContent -->
			<!-- <tm-picker :height="500" inContent v-model:show="showWin2" :columns="citydate"></tm-picker> -->
		</tm-drawer>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useOrderTypeStore } from '@/store/orderType.js';
import orderApi from '@/api/orderApi.js';
const orderTypeStore = useOrderTypeStore();
const { orderTypeMap } = storeToRefs(orderTypeStore);
const emits = defineEmits(['reflash']);
let showWin = ref(false);
const orderGoodsList = ref([]);
const props = defineProps({
	detail: {
		type: Object,
		default: () => ({})
	}
});
const changPos = (orderNo) => {
	orderApi.listOrderGoods({ orderNo }).then((res) => {
		res.data.map((item) => {
			item.goodsAttr = JSON.parse(item.goodsAttr);
			item.goodsPic = JSON.parse(item.goodsPic);
			item.goodsSkuAttr = JSON.parse(item.goodsSkuAttr);
		});
		orderGoodsList.value = res.data;
		console.log(res.data);
		showWin.value = true;
	});
};
const confirmCar = (orderNo, storeId) => {
	orderApi.comeOrder({ orderNo, storeId }).then((res) => {
		if (res.success) {
			uni.showToast({
				title: '加入购物车成功',
				icon: 'none'
			});
			setTimeout(() => {
				showWin.value = false;
				uni.switchTab({
					url: '/pages/tabbar/tab3/index'
				});
			}, 2000);
		}
	});
};
const confirmOrder = (orderNo) => {
	orderApi.outoComplOrder({ orderNo }).then((res) => {
		if (res.success) {
			uni.showToast({
				title: '收货成功',
				icon: 'none'
			});
			setTimeout(() => {
				emits('reflash');
			}, 2000);
		}
	});
};
onMounted(() => {
	console.log(props.detail);
});
const gotoDetail = (id) => {
	uni.navigateTo({ url: `/pages/zone1/order/detail/index?id=${id}` });
};
const delOrder = (id) => {
	uni.showModal({
		title: '提示',
		content: '确定删除吗？',
		success: (res) => {
			if (res.confirm) {
				orderApi.delet({ orderNo: id }).then((res) => {
					if (res.success) {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						});
						setTimeout(() => {
							emits('reflash');
						}, 2000);
					}
				});
			}
		}
	});
};
const cancelFn = (orderNo) => {
	uni.showModal({
		title: '提示',
		content: '请输入取消原因',
		editable: true, //是否显示输入框
		placeholderText: '请输入取消原因', //输入框提示内容
		confirmText: '确认',
		cancelText: '取消',
		success: (res) => {
			if (res.confirm) {
				orderApi
					.cancelOrder({
						closeReason: res.content || '',
						orderNo: orderNo
					})
					.then((res) => {
						if (res.success) {
							uni.showToast({
								title: '取消成功',
								icon: 'none'
							});
							setTimeout(() => {
								emits('reflash');
							}, 2000);
						}
					});
			}
		}
	});
};
</script>

<style lang="scss" scoped>
.storeBottom {
	position: absolute;
	bottom: 20rpx;
	right: 20rpx;
	.btn {
		background-color: $c-red;
		color: #fff;
		font-size: 28rpx;
		padding: 4rpx 20rpx;
		border-radius: 20rpx;
	}
}
.storeMain {
	display: flex;
	justify-content: space-between;
	margin: 20rpx;
	padding: 20rpx;
	background-color: #f1f1f1;
	border-radius: 20rpx;
	.main {
		width: 60%;
		font-size: 24rpx;
		color: #999;
		overflow: hidden; /* 确保超出容器的文本被裁剪 */
		white-space: nowrap; /* 确保文本在一行内显示 */
		text-overflow: ellipsis; /* 使用省略号表示文本超出 */
		.title {
			color: #333;
			font-size: 28rpx;
		}
	}
	.price {
		font-size: 32rpx;
		font-weight: bold;
		color: $c-red;
	}
	.img {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
	}
}
.orderCard {
	.bottom {
		border-top: 1px solid #ddd;
		padding-top: 20rpx;
	}
	.btn {
		background-color: #fff;
		color: #333;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		font-size: 24rpx;
		margin-left: 10rpx;
		border: 1px solid #ddd;
	}
	.red-btn {
		background-color: $c-red;
		color: #fff;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		font-size: 24rpx;
		margin-left: 10rpx;
	}
	.oneCard {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		.main {
			width: 60%;
			font-size: 24rpx;
			color: #999;
			overflow: hidden; /* 确保超出容器的文本被裁剪 */
			white-space: nowrap; /* 确保文本在一行内显示 */
			text-overflow: ellipsis; /* 使用省略号表示文本超出 */
			.title {
				color: #333;
				font-size: 28rpx;
			}
		}
		.price {
			font-size: 32rpx;
			font-weight: bold;
		}
		.img {
			width: 100rpx;
			height: 100rpx;
			margin-right: 20rpx;
			border-radius: 20rpx;
		}
	}
	.storeHead {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		justify-content: space-between;
		.img {
			margin-right: 10rpx;
			width: 40rpx;
			height: 40rpx;
		}
		.headLeft {
			display: flex;
			align-items: center;
		}
	}
}
</style>
